<template>
  <div class="home">
    <!-- 1.顶部区域布局 -->
    <el-card
      class="header"
      shadow="hover"
      style="margin: 0px; border-radius: 5px"
    >
      <div class="card-header">基本信息</div>
      <div class="card-body">
        <div class="item" v-for="(item, index) in topData" :key="index">
          <SvgIcon
            :iconClass="item.iconClass"
            style="width: 35px; height: 35px"
          />
          <div class="content1">
            <div class="num">{{ item.num }}</div>
            <div class="bottom">{{ item.bottom }}</div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 2.中间区域 -->
    <div class="middle">
      <div class="left">
        <el-card
          class="header"
          shadow="hover"
          style="margin: 0px; border-radius: 5px"
        >
          <div class="card-header">
            运行状态<i style="float: right">更新时间:2024-10-17</i>
          </div>
          <div class="card-body">
            <div
              class="item"
              style="background-color: #fff; flex: 0 1 200px; border: 0"
              v-for="(item, index) in leftData"
              :key="index"
            >
              <SvgIcon
                :iconClass="item.iconClass"
                style="width: 35px; height: 35px"
              />
              <div class="content1">
                <div class="num">{{ item.num }}</div>
                <div class="bottom">{{ item.bottom }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="right">
        <el-card
          class="header"
          shadow="hover"
          style="margin: 0px; border-radius: 5px"
        >
          <div class="card-header">用电情况</div>
          <div class="card-body">
            <div
              class="item"
              style="background-color: #fff; flex: 0 1 150px; border: 0"
              v-for="(item, index) in rightData"
              :key="index"
            >
              <SvgIcon
                :iconClass="item.iconClass"
                style="width: 35px; height: 35px"
              />
              <div class="content1">
                <div class="num">{{ item.num }}</div>
                <div class="bottom">{{ item.bottom }}</div>
              </div>
              spa
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 3.底部表格区域 -->
    <div class="table">
      <div class="title">当日逐时用电曲线</div>
      <div class="charts" style="width: 100%; height: 300px"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      topData: [
        { iconClass: "grade", num: "10/0.4", bottom: "电压等级(kV)" },
        { iconClass: "transformer", num: "0", bottom: "变压器(台)" },
        { iconClass: "loadrate2", num: "146.22", bottom: "负载率(%)" },
        { iconClass: "capacity", num: "100", bottom: "额定容量(kVA)" },
        { iconClass: "demand", num: "100", bottom: "申报需量(kVA)" },
        { iconClass: "device", num: "10", bottom: "测控装置(个)" },
      ],
      leftData: [
        { iconClass: "ps", num: "5.74", bottom: "有功功率(kW)" },
        { iconClass: "qs", num: "0", bottom: "无功功率(kVar)" },
        { iconClass: "temp3", num: "--", bottom: "环境温度(℃)" },
        { iconClass: "humidity3", num: "--", bottom: "环境湿度(%)" },
      ],
      rightData: [
        { iconClass: "todayep", num: "146.55", bottom: "当日用电(kW·h)" },
        { iconClass: "down", num: "-3.10%", bottom: "" },
        { iconClass: "yesterdayep", num: "151.23", bottom: "昨日同期(kW·h)" },
      ],
    };
  },
};
</script>

<style scoped>
.header {
  border: 1px solid #a3cfbb; /* 卡片边框 */
}

.card-header {
  padding: 8px 16px 8px 30px;
  border-bottom: 1px solid #cccccc; /* 卡片头部底部边框 */
  background-color: #f8f8f8; /* 背景色 */
}

.card-body {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 平均分配空间 */
  flex-wrap: wrap; /* 允许换行 */
  background-color: #fff; /* 卡片内容背景色 */
}

.middle {
  display: flex; /* 使用 Flexbox 布局 */
  margin: 8px; /* 与顶部区域相同的外边距 */
}

.left {
  flex: 1; /* 左边占用剩余空间 */
  display: flex;
  flex-wrap: wrap;
}

.right {
  flex: 0 0 50%; /* 右边固定宽度，不允许换行 */
}

.item {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  margin: 5px; /* 添加外边距，保持间距 */
  padding: 5px; /* 内边距，使内容不贴边 */
  border: 1px solid #cccccc; /* 边框样式 */
  border-radius: 5px; /* 圆角 */
  background-color: #e1f4eb; /* 背景颜色 */
  flex: 0 1 143px; /* 设置固定宽度为143px，允许缩小 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.content1 {
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 垂直排列内容 */
  margin-left: 10px; /* 为内容添加左边距 */
}

.num {
  font-weight: bold; /* 使数字更醒目 */
  text-align: center; /* 中心对齐 */
  color: #03a36b; /* 数字颜色 */
  margin-bottom: 5px; /* 为数字和说明文字添加下边距 */
}

.bottom {
  font-weight: bold; /* 说明文字加粗 */
  font-size: 10px; /* 说明文字稍微小一点 */
  color: black; /* 说明文字颜色 */
}
</style>
